import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  state = {
    TN: '',
    AF:'',
  }
  render() {
    // 声明局部变量
    // 解构
    const {
      todo: { id, todoName, isDone },
      removeTodo,
      updataTodo,
      EditToggle,
      EditTodo,
      id: EditId // 名字冲突，重新命名
    } = this.props
    const { TN ,AF } = this.state
    return (
      <li key={id}>
        {id !== EditId ?
        // 🐷多选框
          <label>
            {/* 调用修改函数 */}
            <input type="checkbox" checked={isDone} onChange={() => { updataTodo(id) }} />
            <span className={isDone ? 'active' : ''}>{todoName}</span>
          </label>
          // 当在输入框中输入时，会触发onChange事件，实时更新TN的值，也即输入框的value的值
        // 🐷文本框
          :<input
            // 自动聚焦
            autoFocus={AF}
            type='text'
            // 要修改的数据的ID
            id={id}
            // 文本框显示的值
            value={TN}
            // 键盘监听事件
            onKeyUp={(e)=>{
              if(e.keyCode!==13 || !e.target.value) return
              EditTodo(id,TN)
            }}
            // onChange事件
            onChange={(e) => { this.setState({ TN: e.target.value }) }
            } />
        }
        {/* 🐷删除按钮 */}
        <button
          className="btn btn-danger"
          // 调用删除函数
          onClick={() => { removeTodo(id) }}
        >删除</button>
        {/* 🐷编辑按钮 */}
        <button
          className="btn btn-danger"
          style={{ backgroundColor: 'skyblue', border: 'skyblue', marginRight: 10 }}
          onClick={() => {
            EditToggle(id)
            // 此处是展示未修改之前的值，将原来的todoName赋值给item私有数据的TN，并且重新渲染到input(value={TN})上边
            this.setState({
              TN: todoName,
              AF: 'autofocus'
            })
          }}
        >
          {id!==EditId?'编辑':'取消'}
        </button>
      </li>
    )
  }
}
